<template>
	<view class="details fpmw-store">
		<view class="info">
			<view class="info-content">
				<view class="content">
					<view class="title">{{info.name}}</view>
					<view class="address">{{info.address}}
						| <view class="distance">{{distance}}</view>
					</view>
					<view class="rules">
						<view class="tag-group">
							<view class="group-1">先付后返</view>
							<view class="group-2">
								满{{info.activity[col_index].pay_fee||0}}返{{info.activity[col_index].cash_back||0}}
							</view>
						</view>
						<view class="tag">{{info.activity[col_index].rule||' '}}</view>
					</view>
				</view>
				<image class="goodigm" :src="info.image"></image>
			</view>

			<view class="tool-list">
				<view class="tool" @click="copy(info.name)">
					<image class="tool-img"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240207/20240207201127895143.png"></image>
					<view class="tool-txt">复制关键词</view>
				</view>
				<view class="tool" @click="gotoWaiMai">
					<image class="tool-img"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240207/20240207201127895143.png"></image>
					<view class="tool-txt">是否可配送</view>
				</view>
				<view class="error">
					<image class="error-tip"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240207/20240207201159376344.png"></image>
					失败上报
				</view>
			</view>
		</view>
		<view class="active-ask">
			<view class="ask-title">活动要求
				<view class="ask-rule">先抢名额后点餐</view>
			</view>
			<view class="ask-list">
				<view class="ask-label">平台</view>
				<view class="ask-val">
					<image class="mt-img" v-if="info.platform=='meituan'"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201135754183391.png"></image>
					<image class="mt-img" v-if="info.platform==='eleme'"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201135650804211.png">
					</image>
					{{info.platform==='meituan'?'美团':'饿了么'}}
					<view class="stock">剩余名额<text>{{info.activity[col_index].stock||0}}</text>份</view>
				</view>
			</view>
			<view class="ask-list" style="align-items: flex-start;">
				<view class="ask-label">要求</view>
				<view class="ask-val">{{signup.signup_submit_notice||''}}</view>
			</view>
			<view class="ask-list">
				<view class="ask-label">满返</view>
				<view class="ask-val">
					<view style="text-decoration: #FFA531 underline;">
						实付满<text>{{info.activity[col_index].vip_pay_fee}}</text>返<text>{{info.activity[col_index].vip_cash_back}}</text>
					</view> <text style="font-size: 20rpx;">（每单最多含1瓶酒水，饮品店除外）</text>
				</view>
			</view>
		</view>
		<!-- <view class="gift">
			<view class="gift-li">
				<view class="gift-info">
					<view class="gift-label">免费激活会员</view>
					<view class="gift-value">
						每月可额外<text>赚元</text>
					</view>
				</view>
				<image class="gift-img"></image>
			</view>
			<view class="line"></view>
			<view class="gift-li">
				<view class="gift-flag"></view>
				<view class="gift-info">
					<view class="gift-label">显示任务挑战</view>
					<view class="gift-value">
						挑战成功<text>赢现金</text>
					</view>
				</view>
				<image class="gift-img"></image>
			</view>
		</view> -->

		<view
			style="width: 710rpx;margin:20rpx auto 50rpx;background-color: #fff;border-radius: 20rpx;padding: 20rpx;box-sizing: border-box;">
			<view class="container rules-region">
				<view class="head">
					<view class="title" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">品鉴规则
					</view>
				</view>
				<view class="body">
					<view class="item">
						<view class="left" :class="[platform=='meituan'?'meituan':'elem']">1</view>
						<view class="right">{{info.activity[activity_index].rule||'--'}}</view>
					</view>
				</view>
			</view>

			<view class="container process-region" v-if="info.qrcode">
				<view class="head">
					<view style="margin-left: 10px;">一键识别，直达商家</view>
				</view>
				<view class="body">
					<image mode="widthFix" :src="info.qrcode" style="max-width:100%;">
					</image>
				</view>
			</view>

			<view class="container tips-region">
				<view class="head">
					<view class="title" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">重要提示
					</view>
				</view>
				<view class="body">

					<view class="item" v-for="(item,index) in signup.signup_notice" :key="index">
						<view class="left">
							<image src="@/static/img/xing.png">
							</image>
						</view>
						<view class="right">{{item}}</view>
					</view>

				</view>
			</view>
			<view class="container process-region">
				<view class="head">
					<view class="title" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">优惠流程
					</view>
				</view>
				<view class="body">
					<image v-for="(item,index) in signup.signup_process" :key="index" mode="widthFix" :src="item"
						style="max-width:100%;">
					</image>
				</view>
			</view>
			<view class="container special-region">
				<view class="head">
					<view class="title" :class="[platform=='meituan'?'meituan':(platform=='eleme'?'elem':'')]">特别说明
					</view>
				</view>
				<view class="body">
					<image v-for="(item,index) in signup.signup_explain" :key="index" mode="widthFix" :src="item"
						style="max-width:100%;">
					</image>
				</view>
			</view>
		</view>
		<view class="buyTool">
			<view class="buyTool-l">
				<view class="item" @click="goNav('home')">
					<image src="https://video.file.zhuochengyun.com/bwc/uploads/20240205/20240205203714646320.png"
						class="itemIcon"></image>
					<text>首页</text>
				</view>
				<view class="item" @click="goNav('kefu')">
					<image src="https://video.file.zhuochengyun.com/bwc/uploads/20240205/20240205203731688356.png"
						class="itemIcon"></image>
					<text>客服</text>
				</view>
			</view>

			<view class="buyTool-r">
				<button class="buy-btn" v-if="hasDownOrder"
					style="background-color: #fff;color: #ff6804;border: 1rpx solid #ff6804;"
					@click="cancelOrder(info.activity[col_index])">取消报名</button>
				<button :open-type="userInfo.mobile?'':'getPhoneNumber'" @getphonenumber="getphonenumber"
					class="buy-btn" @click="buy">{{!hasDownOrder?'立即抢购':'进店下单'}}</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getStoreDetail,
		signbuy,
		getMobile,
		userDetail,
		ordercancel
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				activity_id: '',
				store_id: '',
				info: [],
				signup: [],
				vip: [],
				distance: '0km',
				userInfo: {},
				hasDownOrder: false,
				col_index: 0

			}
		},
		onLoad(option) {
			const {
				id,
				activity_id,
				distance,
				col_index
			} = option
			this.distance = distance
			this.col_index = col_index
			this.store_id = id
			this.activity_id = activity_id
			this.getData()
			this.userInfo = uni.getStorageSync('userInfo')

		},
		methods: {
			cancelOrder(item) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: item.type == 'sign' ? '确定取消报名吗?' : '确定取消订单吗?',
					success(ret) {
						if (ret.confirm) {
							ordercancel({
								id: item.id
							}).then((res) => {
								if (res.code == 1) {
									uni.showToast({
										title: res.msg,
										icon: 'success',
										mask: true
									});
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)

								} else {
									uni.showToast({
										title: res.msg,
										icon: 'error'
									})
								}
							})
						}
						if (ret.cancel) {

						}
					}
				})
			},
			getphonenumber(e) {
				getMobile({
					code: e.detail.code
				}).then(res => {
					if (res.code == 1) {
						uni.showLoading()
						userDetail().then(res2 => {
							if (res2.code === 1) {
								uni.setStorageSync('userInfo', res2.data)
								this.buy()
							}
						})
					}
				})
			},
			goNav(type) {
				if (type == 'home') {
					uni.switchTab({
						url: '/pages/index/newIndex'
					})
				} else if (type == 'kefu') {
					uni.navigateTo({
						url: '/pages/problemList/problemList'
					})
				}
			},
			copy(name) {
				uni.setClipboardData({
					data: name,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: "success"
						});
					}
				});
			},
			getData() {
				getStoreDetail({
					id: this.store_id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data.info;
						this.signup = res.data.signup;
						this.vip = res.data.vip;
						this.hasDownOrder = res.data.info.activity[this.col_index].is_buy ? true : false
						console.log(this.hasDownOrder, 'this.hasDownOrder');
					}
				})
			},
			buy() {
				const item = this.info.activity[this.col_index]
				if (item.is_buy > 3) {
					uni.showToast({
						title: '报名活动次数已满',
						icon: 'none'
					})
					return false
				}
				if (!this.hasDownOrder) {

					uni.showLoading({
						mask: true
					})
					signbuy({
						activity_id: this.activity_id
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000,
								mask: true
							});
							this.hasDownOrder = true
							// setTimeout(() => {
							// 	uni.navigateBack()
							// }, 3000)
							return
							uni.requestPayment({
								...res.data.wx,
								success(res) {
									uni.showToast({
										title: '报名成功',
										icon: 'none',
										mask: true
									});
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/uploadVoucher/index?id=${this.activity_id}`
										})
									}, 2000)
								},
								fail(err) {
									console.log(err, '支付--fail');
									if (err.errMsg === 'requestPayment:fail cancel') {
										uni.showToast({
											title: '支付已取消',
											icon: 'none'
										});

									}
								}
							});
						}
					})
				} else {
					if (item.platform === 'meituan') {
						uni.navigateToMiniProgram({
							appId: 'wxde8ac0a21135c07d',
							path: this.info.activity[this.col_index].to_url,
							envVersion: "release",
							success: res => {
								// 打开成功
								console.log("打开成功", res);
							},
							fail: err => {
								console.log(err);
							}
						})
					} else {
						uni.showToast({
							title: '饿了吗暂未开通',
							icon: 'none'
						})
					}

				}

			},
			gotoWaiMai: function() {
				let activity = this.info.activity[0];
				if (!activity) {
					return;
				}
				if (activity.platform == 'meituan') {
					if (this.info.meituan_url) {
						window.location.href = this.info.meituan_url;
					} else {
						uni.showToast({
							title: '暂无链接地址',
							icon: "error"
						});
					}
				} else { //饿了么复制店名
					uni.setClipboardData({
						data: this.info.name,
						success() {
							uni.showToast({
								title: '复制成功',
								icon: "success"
							});
						}
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.details {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(to bottom, #ff8546 0, #f4f4f4 250rpx, #f4f4f4 100%);
		padding-top: 20rpx;
		padding-bottom: 180rpx;
		box-sizing: border-box;

		.gift {
			width: 710rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 20rpx;
			background-color: #fff;

			.line {
				width: 2rpx;
				height: 100rpx;
				background-color: #f4f4f4;
				margin: 0 20rpx;
			}

			.gift-li {
				display: flex;
				align-items: center;

				.gift-info {
					.gift-label {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.gift-value {
						font-size: 24rpx;
						color: #666;

						text {
							color: #f47d28;
						}
					}
				}

				.gift-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-left: 20rpx;
					background-color: #ddd;
				}
			}
		}

		.active-ask {
			width: 710rpx;
			box-sizing: border-box;
			padding: 20rpx 30rpx 10rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-left: 20rpx;

			.ask-title {
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f4f4f4;

				.ask-rule {
					font-weight: normal;
					font-size: 24rpx;
					color: #666;
					margin-left: 40rpx;
				}
			}

			.ask-list {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f4f4f4;
				font-weight: bold;

				&:last-child {
					border: 0;
				}

				.ask-label {
					width: 50rpx;
					color: #666;
					margin-right: 20rpx;
				}

				.ask-val {
					flex: 1;
					color: #333;
					display: flex;
					align-items: center;

					.mt-img {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					text {
						color: #FFA531;
						font-weight: normal;
					}

				}
			}
		}

		.info {
			width: 710rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0 auto 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.info-content {
				display: flex;

				.content {
					flex: 1;

					.title {
						font-size: 32rpx;
						font-weight: bold;
					}

					.address {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #666;
						margin-top: 20rpx;
					}

					.rules {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.tag-group {
							display: flex;
							align-items: center;
							border-radius: 10rpx;
							overflow: hidden;
							font-size: 24rpx;
							margin-right: 10rpx;

							.group-1 {
								background-color: #fc5746;
								color: #fff;
								border: 1rpx solid #fc5746;
								padding: 5rpx 5rpx;
							}

							.group-2 {
								color: #ff6804;
								border: 1rpx solid #ff6804;
								padding: 5rpx 5rpx;
								border-radius: 0 10rpx 10rpx 0;
							}
						}

						.tag {
							font-size: 24rpx;
							padding: 5rpx 10rpx;
							padding: 5rpx 10rpx;
							border-radius: 10rpx;
							border: 1rpx solid #ff6804;
							color: #ff6804;
						}
					}
				}

				.goodigm {
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
					margin-left: 20rpx;

				}
			}


			.tool-list {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				position: relative;

				.tool {
					text-align: center;
					margin-right: 20rpx;

					.tool-img {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 10rpx;
					}

					.tool-txt {
						font-size: 20rpx;
						color: #ff6804;
					}
				}
			}

			.error {
				color: #666;
				font-size: 24rpx;
				position: absolute;
				right: 20rpx;
				bottom: 0;
				display: flex;
				align-items: center;

				.error-tip {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.buyTool {
			width: 100%;
			height: 120rpx;
			padding-bottom: 40rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 99;

			.buyTool-l {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.item {
					color: #333;
					display: flex;
					flex-direction: column;
					align-items: center;

					.itemIcon {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}
			}

			.buyTool-r {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				.buy-btn {
					width: 200rpx;
					height: 70rpx;
					font-size: 32rpx;
					color: #fff;
					border-radius: 40rpx;
					background-color: #fe8025;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

	}

	.fpmw-store .rules-region {
		margin-top: 0px
	}

	.fpmw-store .rules-region .body {
		display: flex;
		flex-flow: column
	}

	.fpmw-store .rules-region .body .item {
		margin-bottom: 9px;
		display: flex;
		color: #333;
		font-weight: 700;
		font-size: 28rpx;
	}

	.fpmw-store .rules-region .body .item .left {
		width: 19px;
		height: 19px;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		text-align: center;
		line-height: 19px
	}

	.fpmw-store .rules-region .body .item .right {
		flex: 1;
		margin-left: 7px
	}

	.fpmw-store .rules-region .body .item .right .amount {
		margin: 0
	}

	.fpmw-store .tips-region {
		position: relative
	}

	.fpmw-store .tips-region .back-img {
		position: absolute;
		width: 100%;
		height: 100%
	}

	.fpmw-store .tips-region .back-img image {
		width: 100%;
		height: 100%
	}

	.fpmw-store .tips-region .head {
		position: relative
	}

	.fpmw-store .tips-region .body {
		position: relative;
		display: flex;
		flex-flow: column;
		color: #333;
		font-size: 28rpx;
	}

	.fpmw-store .tips-region .body .item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 9px
	}

	.fpmw-store .tips-region .body .item .left image {
		width: 15px;
		height: 15px;
		display: block
	}

	.fpmw-store .tips-region .body .item .right {
		margin-left: 7px
	}

	.fpmw-store .banner-region .banner-image {
		width: 100%;
		height: 100%;
		margin: unset;
		display: block;
		border-radius: 9px
	}

	.fpmw-store .special-region {
		margin-bottom: 96px
	}

	.fpmw-store .footer-region {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		display: flex;
		height: 72px;
		justify-content: center
	}

	.fpmw-store .footer-region .buy-btn .btn {
		width: 309px;
		height: 43px;
		line-height: 43px;
		font-size: 19px;
		border-radius: 43px;
		color: #fff;
		text-align: center;
		-webkit-animation-name: scaleDraw;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: infinite;
		/*动画播放的次数*/
		-webkit-animation-duration: 2s;
		/*动画所花费的时间*/
		/* 	background: linear-gradient(to right, #ffae31, #fe771d);
		color: #fff !important; */
	}

	.meituan {
		color: #333 !important;
		background-color: #ff8546;
	}

	@-webkit-keyframes scaleDraw {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			-webkit-transform: scale(1);
			transform: scale(1)
				/*开始为原始大小*/
		}

		25% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
				/*放大1.1倍*/
		}

		50% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		75% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
		}
	}

	@keyframes scaleDraw {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			-webkit-transform: scale(1);
			transform: scale(1)
				/*开始为原始大小*/
		}

		25% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
				/*放大1.1倍*/
		}

		50% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		75% {
			-webkit-transform: scale(1.1);
			transform: scale(1.1)
		}
	}
</style>